@page "/maps/marker-cluster"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates the world's top 50 cities by showing the markers in their locations and clustering the markers to avoid intersection.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to display multiple markers in the same region without intersecting each other. If a marker intersects, it will be clustered and the total number of markers will be displayed over the cluster. When zooming in, the number of clusters will be decreased, and the individual marker will be displayed. When zooming out, markers that intersect will again be clustered. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html'>MapsMarkerClusterSettings</a></code> in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayers.html#Syncfusion_Blazor_Maps_MapsLayers_Layers'>MapsLayer</a></code> to enable marker clustering. Tooltip is enabled in this example.</p>
   <p> More information about marker clustering can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/markers/#marker-clustering'>documentation section</a>. </p>
</ActionDescription>

<div class="control-section">
    <SfMaps UseGroupingSeparator="true" Format="N0">
        <MapsZoomSettings Enable="true"/>
        <MapsTitleSettings Text="Top 50 largest cities in the World">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' TValue="string">
                <MapsShapeSettings Fill="#C1DFF5"/>
                <MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                    <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF"/>
                </MapsMarkerClusterSettings>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="20" Width="20" DataSource="@LargestCities" TValue="LargestCityDetails">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Area" Format="<b>${City}</b><br>Rank: <b>${Rank}</b><br>Area: <b>${Area} sq kms</b>"/>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="http://www.citymayors.com/statistics/largest-cities-area-125.html"
           target="_blank">www.citymayors.com</a>
    </div>
</div>

@code {    
    public class LargestCityDetails {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string City { get; set; }
        public double Area { get; set; }
        public double Rank { get; set; }
    };
    public List<LargestCityDetails> LargestCities = new List<LargestCityDetails> {
        new LargestCityDetails { Latitude=40.6971494, Longitude=-74.2598747, City="New York", Area=8683, Rank=1 },
        new LargestCityDetails { Latitude=35.4526439, Longitude=139.4567198, City="Tokyo", Area=6993, Rank=2 },
        new LargestCityDetails { Latitude=33.1147951, Longitude=-94.2114611, City="Atlanta", Area=5083, Rank=4 },
        new LargestCityDetails { Latitude=41.8333925, Longitude=-88.0121569, City="Chicago", Area=5498, Rank=3 },
        new LargestCityDetails { Latitude=40.0024137, Longitude=-75.2581194, City="Philadelphia", Area=4661, Rank=5 },
        new LargestCityDetails { Latitude=42.3142647, Longitude=-71.11037, City="Boston", Area=4497, Rank=6 },
        new LargestCityDetails { Latitude=34.0201613, Longitude=-118.6919306, City="Los Angeles", Area=4320, Rank=7 },
        new LargestCityDetails { Latitude=31.2590796, Longitude=-95.6476923, City="Houston", Area=3355, Rank=9 },
        new LargestCityDetails { Latitude=42.3526257, Longitude=-83.239291, City="Detroit", Area=3267, Rank=10 },
        new LargestCityDetails { Latitude=47.2510905, Longitude=-123.1255834, City="Washington", Area=2996, Rank=11 },
        new LargestCityDetails { Latitude=25.7823907, Longitude=-80.2994995, City="Miami", Area=2891, Rank=12 },
        new LargestCityDetails { Latitude=35.1468253, Longitude=136.7862238, City="Nagoya", Area=2875, Rank=13 },
        new LargestCityDetails { Latitude=48.8588377, Longitude=2.2770198, City="Paris", Area=2723, Rank=14 },
        new LargestCityDetails { Latitude=50.1781141, Longitude=2.4939991, City="Essen", Area=2642, Rank=15 },
        new LargestCityDetails { Latitude=34.677518, Longitude=135.3455988, City="Osaka", Area=2564, Rank=16 },
        new LargestCityDetails { Latitude=47.6129432, Longitude=-122.4821496, City="Seattle", Area=2470, Rank=17 },
        new LargestCityDetails { Latitude=-26.1715046, Longitude=27.9699835, City="Johannesburg", Area=2396, Rank=18 },
        new LargestCityDetails { Latitude=44.9706114, Longitude=-93.4015641, City="Minneapolis", Area=2316, Rank=19 },
        new LargestCityDetails { Latitude=19.3892246, Longitude=-70.1305136, City="San Juan", Area=2309, Rank=20 },
        new LargestCityDetails { Latitude=-34.6157437, Longitude=-60.5733857, City="Buenos Aires", Area=2266,  Rank=21 },
        new LargestCityDetails { Latitude=40.4313473, Longitude=-80.050541, City="Pittsburgh", Area=2208, Rank=22 },
        new LargestCityDetails { Latitude=55.580748, Longitude=36.8251027, City="Moscow", Area=2150, Rank=23 },
        new LargestCityDetails { Latitude=38.6530169, Longitude=-90.3835487, City="St. Louis", Area=2147, Rank=24 },
        new LargestCityDetails { Latitude=-37.9712368, Longitude=144.4926562, City="Melbourne", Area=2080, Rank=25 },
        new LargestCityDetails { Latitude=27.9941986, Longitude=-82.7344819, City="Tampa", Area=2078, Rank=26 },
        new LargestCityDetails { Latitude=23.29296, Longitude=-105.6587494, City="Mexico", Area=2072, Rank=27 },
        new LargestCityDetails { Latitude=13.0555127, Longitude=80.1330167, City="Chennai", Area=2069, Rank=28 },
        new LargestCityDetails { Latitude=32.8242404, Longitude=-117.3891773, City="San Diego", Area=2026, Rank=29 },
        new LargestCityDetails { Latitude=-23.6821604, Longitude=-46.8755027, City="Sao Paulo", Area=1968, Rank=30 },
        new LargestCityDetails { Latitude=39.1362562, Longitude=-84.680488, City="Cincinnati", Area=1740, Rank=32 },
        new LargestCityDetails { Latitude=45.5576996, Longitude=-74.0104927, City="Montreal", Area=1740, Rank=33 },
        new LargestCityDetails { Latitude=-33.3465295, Longitude=134.409569, City="Sydney", Area=1687, Rank=34 },
        new LargestCityDetails { Latitude=41.497447, Longitude=-81.8459461, City="Cleveland", Area=1676, Rank=35 },
        new LargestCityDetails { Latitude=43.6565353, Longitude=-79.6010416, City="Toronto", Area=1655, Rank=36 },
        new LargestCityDetails { Latitude=51.528308,  Longitude=0.3817841, City="London", Area=1623, Rank=37 },
        new LargestCityDetails { Latitude=3.1384965, Longitude=101.5468996, City="Kuala Lumpur", Area=1606, Rank=38 },
        new LargestCityDetails { Latitude=-27.3810232, Longitude=152.4326904, City="Brisbane", Area=1603, Rank=39 },
        new LargestCityDetails { Latitude=-22.913885, Longitude=-43.7261859, City="Rio de Janeiro", Area=1580, Rank=40 },
        new LargestCityDetails { Latitude=45.4626482, Longitude=9.0376468, City="Milan", Area=1554, Rank=41 },
        new LargestCityDetails { Latitude=38.477368, Longitude=-100.564023, City="Kansas", Area=1514, Rank=42 },
        new LargestCityDetails { Latitude=39.7797003, Longitude=-86.2728365, City="Indianapolis", Area=1432, Rank=43 },
        new LargestCityDetails { Latitude=14.5964957, Longitude=120.94454, City="Manila", Area=1399, Rank=44 },
        new LargestCityDetails { Latitude=37.7576793, Longitude=-122.5076406, City="San Francisco", Area=1365, Rank=45 },
        new LargestCityDetails { Latitude=36.7953408, Longitude=-76.2928249, City="irginia Beach", Area=1364, Rank=46 },
        new LargestCityDetails { Latitude=-6.229728, Longitude=106.6894282, City="Jakarta", Area=1360, Rank=47 },
        new LargestCityDetails { Latitude=41.8169712, Longitude=-71.4912209, City="Providence", Area=1304, Rank=48 },
        new LargestCityDetails { Latitude=30.0594699, Longitude=31.1884235, City="Cairo", Area=1295, Rank=49 },
        new LargestCityDetails { Latitude=28.6466772, Longitude=76.8130623, City="Delhi", Area=1295, Rank=50 }
    };
}